<template>
    <div class='sub-category'>
        <div class="container">
            <!-- 面包屑 -->
            <SubBread :bread="bread" />
            <!-- 筛选区 -->
            <SubFilter :list="filterList" @filter-change="filterChange" />

            <div class="goods-list">
                <!-- 排序 -->
                <SubSort @change="filterChange" />
                <!-- 列表 -->
                <ul>
                    <li v-for="item in goods" :key="item.id">
                        <GoodsItem :goods="item" />
                    </li>
                </ul>
                <!-- 无限加载 -->
                <InfiniteLoading :loading="loading" :finished="finished" @infinite="getSubGoodsData" />
            </div>
        </div>
    </div>
</template>

<script setup>
import SubBread from './components/sub-bread.vue'
import SubFilter from './components/sub-filter.vue'
import SubSort from './components/sub-sort.vue'
import GoodsItem from '../category/components/goods-item.vue'
import { getSubFilter, getSubGoods } from '@/api/category'
import { reactive, ref, watch } from 'vue';
import { useRoute } from 'vue-router'

const route = useRoute()

// 面包屑
let bread = ref({})
// 筛选区
const filterList = ref([])
// 列表
let goods = ref([])
let reqParams = reactive({
    categoryId: route.params.id,
    page: 1,
    pageSize: 20
})

const loading = ref(false)
const finished = ref(false)
watch(() => route.params.id, async (newVal) => {
    if (newVal && `/category/sub/${route.params.id}` === route.path) {
        loading.value = true
        const res = await getSubFilter(route.params.id)
        bread.value = {
            name: res.result.name,
            id: res.result.id,
            parentName: res.result.parentName,
            parentId: res.result.parentId,
        }

        // 清空原有的数据
        filterList.value = []

        filterList.value.push({
            name: '品牌',
            id: 'brand',
            properties: [{
                id: null,
                name: '全部',
                active: true,
                level: 0
            }]
        })
        res.result.brands.forEach(item => {
            filterList.value[0].properties.push({
                id: item.id,
                name: item.name,
                active: false,
                level: 0
            })
        })

        res.result.saleProperties.forEach((item, index) => {
            item.properties.forEach(i => {
                i.active = false,
                    i.level = index + 1
            })
            item.properties.unshift({
                id: null,
                name: '全部',
                active: true,
                level: index + 1
            })
            filterList.value.push(item)
        })

        reqParams = {
            categoryId: route.params.id,
            page: 1,
            pageSize: 20
        }

        getSubGoodsData()
        loading.value = false
    }
}, { immediate: true })


const filterChange = async (params) => {
    reqParams = {
        ...reqParams,
        ...params,
        page: 1
    }
    loading.value = true
    const { result: { items: items } } = await getSubGoods(reqParams)
    goods.value = items
    loading.value = false
}

const getSubGoodsData = async () => {
    loading.value = true
    const { result: { items: items } } = await getSubGoods(reqParams)
    if (items.length) {
        goods.value.push(...items)
        reqParams.page++
    } else {
        // 加载完毕
        finished.value = true
    }
    loading.value = false
}
</script>
<script setup>
</script>
<style lang='scss' scoped>
.goods-list {
    background: #fff;
    padding: 0 25px;
    margin-top: 25px;

    ul {
        display: flex;
        flex-wrap: wrap;
        padding: 0 5px;

        li {
            margin-right: 20px;
            margin-bottom: 20px;

            &:nth-child(5n) {
                margin-right: 0;
            }
        }
    }
}
</style>